import { useState } from 'react';
import {useQuery, useMutation} from 'react-query'
import { getTopics } from '../api/cnode';

const Cnode = () => {
    const [tab, setTab] = useState('');
    const {data,loading,error} = useQuery(
        ['getTopics',tab],
        ()=>getTopics(tab)
    );
    const mutation = useMutation((data)=>{console.log(data)})
    const post = () => {
        mutation.mutate({title: 123})
    }
    if(loading){
        return <div>loading。。。</div>
    }
    return (
        <div style={{display:'flex'}}>
            <div>
                <div>
                    <button>全部</button>
                    <button onClick={() => setTab('good')}>精华</button>
                    <button onClick={() => setTab('share')}>分享</button>
                    <button onClick={() => setTab('ask')}>问答</button>
                </div>
                {
                    data?.data.map(item => (
                        <li key={item.id}>{item.title}</li>
                    ))
                }
            </div>
            <div>
                <button disabled={mutation.isLoading} onClick={post}>发布</button>
            </div>
        </div>
    )
}

export default Cnode